<!--
 * @Author: your name
 * @Date: 2021-07-23 21:11:35
 * @LastEditTime: 2021-07-23 23:44:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hairdressing_web\src\pages\fenxiao\detail.vue
-->
<template>
  <view>
    <view class="clear head">
      <view class="fl touxiang">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <view class="fl name">
        <open-data class="l_text" type="userNickName"></open-data>
        <view class="data"
          >当前收入<text class="color-main">￥{{ money }}</text> &nbsp;<text class="c-ml10">成</text>功分销人数:<text
            class="color-main"
            >{{ count }}人</text
          ></view
        >
      </view>
    </view>
    <view class="swiperBox c-relative">
      <u-swiper :list="list" class="a"></u-swiper>
    </view>
    <u-card :border="true" :show-foot="false" :show-head="false">
      <view slot="body" class="contbody">
        <!-- <view class="c-color-ccc c-mt30">家庭日用品</view> -->
        <view class="c-color-000 c-mt10">{{ goods.name }}</view>
        <view class="c-mt30 c-flex c-flex-between">
          <view class="c-flex">
            <view class="c-color money c-fw600">￥{{ price }}</view>
          </view>
        </view>
      </view>
    </u-card>
    <cell left="服务" center="付款后15天内发货，不支持7天..." :right="'arrow-right'"></cell>
    <cell left="快递" center="快递包邮"></cell>
    <cell left="分销" center="已获得" :num="'￥' + money"></cell>
    <cell left="人数" center="成功分销人数" :num="count + '人'"></cell>
    <u-line color="#eee"></u-line>
    <view class="c-p15 mb90">
      <h4>商品详情</h4>
      <view class="c-color-ccc c-mt10 c-fs0" v-html="goods.description"> </view>
    </view>
    <button class="btn" open-type="share">立即分享</button>
  </view>
</template>
<script>
  import cell from '@/commponents/public/cell/cell'
  import goods from '@/services/goods'
  import url from '../../common/util/url'
  export default {
    components: {
      // NavBar,
      cell
    },
    onShareAppMessage(res) {
      return {
        title: '我发现了一个好东西，快来看看吧~',
        path: '/pages/productDetails/index?id=' + this.params.id + '&userId=' + uni.getStorageSync('userId') // 分享的页面路径
      }
    },
    data() {
      return {
        list: [],
        goods: {},
        price: '',
        title: '',
        count: '',
        money: ''
      }
    },
    mounted() {
      this.params = url.getCurrentPageParam()
      this.money = this.params.money
      this.count = this.params.count
      this.getDetail()
    },
    methods: {
      getDetail() {
        goods
          .detail({
            id: this.params.id,
            userId: uni.getStorageSync('userId')
          })
          .then(data => {
            let list = data.albumPics.split(',')
            list.forEach((element, index) => {
              list[index] = {
                image: element
              }
            })
            this.list = list
            this.goods = data
            this.price = this.goods.skuList[0].price
            this.title = this.goods.name
          })
      }
    }
  }
</script>
<style scoped>
  .a >>> swiper {
    height: 65vw !important;
  }
</style>
<style lang="scss" scoped>
  .btn {
    position: fixed;
    width: 100%;
    height: 60px;
    line-height: 60px;
    bottom: 0;
    left: 0;
    background-color: #00b486;
    text-align: center;
    color: #fff;
  }
  .mb90 {
    margin-bottom: 150rpx;
  }
  .c-fs0 {
    font-size: 0px;
  }
  .money {
    font-size: 32rpx;
    color: #ff6b22;
  }
  u-card {
    /deep/.u-card {
      box-sizing: border-box;
      margin: 0 !important;
      border-radius: 0 !important;
    }
  }
  .head {
    padding: 15px;
    .touxiang {
      width: 55px;
      border-radius: 50%;
      font-size: 0;
      height: 55px;
    }
    .name {
      margin-left: 10px;
      padding: 5px;
      .l_text {
        font-size: 18px;
        font-weight: 600;
      }
      .data {
        font-size: 14px;
        margin-top: 2px;
      }
    }
  }
  .swiperBox /deep/ .u-swiper-wrap {
    border-radius: 0 !important;
  }
  .swiperBox /deep/ .u-list-image-wrap {
    border-radius: 0 !important;
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .clear::after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
  }
</style>
